<script setup>
import { ref,reactive,computed,watch,watchEffect ,defineAsyncComponent} from "vue";
import Box from "@/components/box.vue"
import { useStore } from "@/store/index.js";
import data from "../../public/data.json"
import pdf from "@/components/pdf.vue"
// const pdf=defineAsyncComponent(()=>import("@/components/pdf.vue"))
const store=useStore()
const tab=ref("home")
// const data=reactive([])
// store.data.then(res=>{
// 	console.log("res:",res);
// 	data.push(...res)
// })
</script>


<template>
	<div class="page">
		<el-menu
        active-text-color="#fff"
        background-color="rgb(45, 45, 45)"
        default-active="1"
        text-color="#fff"
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
  >
			<div class="text logo">LOGO</div>
			<div class="flex-grow" />
			<el-menu-item index="1">首页</el-menu-item>
		</el-menu>
		<div class="main">
			<el-tabs  tabPosition="left" v-model="tab" class="setting">
				<el-tab-pane label="网站首页" name="home">
					<div class="view">
						<div class="padding">
							<div class="text logo scale4">LOGO</div>
							<h1 class="h1">网站首页</h1>
							<p class="h2">记录个人项目</p>
							<div class="buttons">
								<div class="button button1" @click="tab='all'">查看</div>
							</div>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="全部项目" name="all">
					<div class="view flex">
						<Box v-for="item in data" :key="item.link" :item="item" />

					</div>
				</el-tab-pane>
				<el-tab-pane label="个人简历" name="resume" lazy>
					<div class="pdf">
						<pdf></pdf>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>


<style scoped>
.page,.setting{
	width: 100vw;
	height: 100vh;
}
.setting{
	width:100vw;
	height: calc( 100vh - 60px );
}
.main :deep(.is-active){
	background-color: rgb(0, 140, 255);
}
.main :deep(.el-tabs){
	background-color: rgb(45, 45, 45);
	color: #fff;
}
.main :deep(.is-left){
	margin-right: 0;
	color: #fff;
}
.main :deep(.el-tabs__nav-wrap.is-left)::after,:deep(.el-tabs__active-bar){
	background-color: rgb(127, 127, 127);
}
.logo{
	position: relative;
	line-height: 59px;
	padding:0 20px;
}
.text{
	overflow: hidden;
    background-clip: unset;
    color: transparent;
    font-weight: bold;
    -webkit-background-clip: text;
	background-size: 200% 200%;
    animation: Gradient 6s cubic-bezier(0.37, 0.4, 0.5, 0.53) infinite;
	background-image: linear-gradient(280deg, #404040, #ffffff 51%,#ffffff ,#bdbdbd, #c4c4c4 52%, #ffffff);
}


@keyframes Gradient {
    0% {
        background-position: 100% 100%
    }
    50% {
        background-position: 50% 75%
    }
    100% {
        background-position: -5% -5%
    }
}
.scale4{
	transform: scale(4);
    transform-origin: center;
	line-height: 1em;
}
.padding{
	padding: 64px 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
h1, h2, h3, h4, h5, h6, strong, b {
    font-weight: 600;
	margin: 0;
    line-height: 1.25;
}
.h1{
	margin-top: 2rem;
	font-size: 3rem;
	color: #2c3e50;
}
.h2{
	color: #476582;
	line-height: 1.2;
    font-size: 1.6rem;
	margin: 0.25rem 0 0;
}
.view{
	width: 100%;
	height: calc( 100vh - 60px );
	background-color: #fff;
}
.flex{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
    justify-content:flex-start;
	align-content: flex-start;
	background-color:rgb(45, 45, 45);
}
.button{
	cursor: pointer;
	background-color: #5468ff;
	margin-top: 2rem;
	display: inline-block;
    border-radius: 6px;
    padding: 0 20px;
    line-height: 44px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--c-bg);
    border: 2px solid #5468ff;
    transition: background-color .1s ease;
}
.button:hover {
    text-decoration: none;
    color: #fff;
    background-color: #747bff;
}
</style>